<template>
    <div class="dragDemo">
        <!--列表1-->
        <draggable class="list-group"
                   element="div"
                   v-model="listLeft"
                   :options="dragOptions1">
            <div v-for="(item,key) in listLeft" :key="key">
                <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
                {{item.name}}-{{item.value}}
            </div>
        </draggable>
        <!--列表2-->
        <draggable class="list-group2"
                   element="div"
                   v-model="listRight"
                   :options="dragOptions2"
        >
            <vue-draggable-resizable v-for="(item,key) in listRight" :key="key">
                <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
                {{item.name}}-{{item.value}}
            </vue-draggable-resizable>
        </draggable>
    </div>
</template>
 
<script>
    import draggable from "vuedraggable";
    import VueDraggableResizable from 'vue-draggable-resizable'
    import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
    export default{
        name:'dragDemo',
        components:{
            draggable,
            VueDraggableResizable
        },
        data(){
            return{
                listLeft:[{
                    name:'数据一',
                    value:'1'
                },{
                    name:'数据二',
                    value:'2'
                },{
                    name:'数据三',
                    value:'3'
                },{
                    name:'数据四',
                    value:'4'
                },{
                    name:'数据五',
                    value:'5'
                }],
                listRight:[]
            }
        },
        computed: {
            dragOptions1() {
                return {
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                };
            },
            dragOptions2(){
                return {
                    group: "description",
                };
            }
        }
    }
</script>
 
<style scoped lang="scss" rel="stylesheet/scss">
   .dragDemo{
       margin-top:50px;
       display: flex;
       justify-content: center;
       color: #555;
       .list-group{
           width: 300px;
           border: 1px solid #ddd;
           text-align: center;
           margin-left: 200px;
           >div{
               padding:10px;
               border-bottom:1px dashed #ddd;
               img{
                   width:25px;
                   height:25px;
                   vertical-align: middle;
                   padding-right:10px;
               }
           }
       };
       .list-group2{
           background-color: #57af8d;
           height: 700px; 
           width: 800px;
           border: 1px solid red; 
           position: relative;
           margin: 0 auto    
       }
   }
</style>